import {MAP_META, STATE_NAMES} from '../constants';

import classnames from 'classnames';
import {useState, useCallback, useRef} from 'react';
import {useTranslation} from 'react-i18next';
import {useHistory} from 'react-router-dom';
import {useTransition, animated} from 'react-spring';
import {useClickAway} from 'react-use';

const StateDropdown = ({stateCode, trail}) => {
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownRef = useRef();
  const history = useHistory();
  const {t} = useTranslation();

  useClickAway(dropdownRef, () => {
    setShowDropdown(false);
  });

  const transitions = useTransition(showDropdown, {
    from: {
      opacity: 0,
      transform: 'translate3d(0, 2px, 0)',
      zIndex: 999,
    },
    enter: {
      opacity: 1,
      transform: 'translate3d(0, 0px, 0)',
      zIndex: 999,
    },
    leave: {
      opacity: 0,
      transform: 'translate3d(0, 2px, 0)',
      zIndex: 999,
    },
    config: {
      mass: 1,
      tension: 210,
      friction: 20,
    },
  });

  const handleClick = useCallback(
    (stateCodeItr) => {
      setShowDropdown(false);
      history.push(`/state/${stateCodeItr}`);
    },
    [history]
  );

  return (
    <div className="StateDropdown" ref={dropdownRef}>
      <animated.h1
        className={classnames('state-name', 'fadeInUp', {
          expanded: showDropdown,
        })}
        style={trail}
        onClick={setShowDropdown.bind(this, !showDropdown)}
      >
        {t(STATE_NAMES[stateCode])}
      </animated.h1>

      {transitions(
        (style, item) =>
          item && (
            <animated.div className="dropdown" {...{style}}>
              {Object.keys(MAP_META)
                .filter(
                  (stateCodeItr) =>
                    stateCodeItr !== 'TT' && stateCodeItr !== stateCode
                )
                .sort((code1, code2) =>
                  STATE_NAMES[code1].localeCompare(STATE_NAMES[code2])
                )
                .map((stateCodeItr) => (
                  <h1
                    key={stateCodeItr}
                    className="item"
                    onClick={handleClick.bind(this, stateCodeItr)}
                  >
                    {t(STATE_NAMES[stateCodeItr])}
                  </h1>
                ))}
            </animated.div>
          )
      )}

      {showDropdown && <div className="backdrop"></div>}
    </div>
  );
};

export default StateDropdown;
